<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>
    <link href="/css/bootstrap.css" rel='stylesheet' type='text/css' />
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Custom Theme files -->
    <link href="/css/style.css" rel='stylesheet' type='text/css' />
    <link rel="stylesheet" data-ignore="true" href="/css/204">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/buy.css">
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!--webfont-->
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/js/login.js"></script>
    <script src="/js/jquery.easydropdown.js"></script>
    <script src="/js/jquery-1.11.1.min.js"></script>


    <!--Animation-->
    <script src="/js/wow.min.js"></script>
    <link href="/css/animate.css" rel='stylesheet' type='text/css' />
    <script>
        new WOW().init();
    </script>
</head>
<body>
<div class="header">
    <div class="col-sm-8 header-left">
        <div class="logo">
            <a href="index.html"><img src="/images/logos.png" alt=""/></a>
        </div>
        <div class="menu">
            <a class="toggleMenu" href="#"><img src="/images/nav.png" alt="" /></a>
            <ul class="nav" id="nav">
                <li class="active"><a href="#">个人中心</a></li>

                <li><a th:if="${session.user==null}" href="#">我的订单</a></li>
                <li><a th:if="${session.user}" th:href=" '/order/list?userId=' + ${session.user.userId}">我的订单</a></li>
                <li><a href="#">我的收藏</a></li>
                <li><a href="#">历史记录</a></li>
                <div class="clearfix"></div>
            </ul>
            <script type="text/javascript" src="js/responsive-nav.js"></script>
        </div>
        <!-- start search-->
        <!----search-scripts---->
        <script src="/js/classie.js"></script>
        <script src="/js/uisearch.js"></script>
        <script>
            new UISearch( document.getElementById( 'sb-search' ) );
        </script>
        <!----//search-scripts---->
        <div class="clearfix"></div>
    </div>
    <div class="col-sm-4 header_right">
        <div id="loginContainer"><a href="#" id="loginButton"><img src="/images/login.png">
            <span th:if="${session.user==null}">登陆</span>
            <a href="/info"><span th:if="${session.user}" th:text="${session.user.displayName}"></span></a>
            <input type="button" id="logout" value="注销" onclick="userlogout()"  th:if="${session.user}">
        </a>
            <div id="loginBox">
                <form id="loginForm" action="/user/login" method="post">
                    <fieldset id="body">
                        <fieldset>
                            <label>用户名</label>
                            <input type="text" name="username" id="username">
                        </fieldset>
                        <fieldset>
                            <label>密码</label>
                            <input type="password" name="password" id="password">
                        </fieldset>
                        <fieldset th:if="${loginFailure}">
                            <label style="color: red">用户名或密码错误</label>
                        </fieldset>
                        <input type="submit" id="login" value="登陆">
                        <!--<label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>-->
                    </fieldset>
                    <span><a th:href="@{/register.html}">注册新账户</a></span>
                </form>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>

<script th:inline="javascript">
    if ([[${loginFailure}]] == true) {
        $('#loginBox').toggle()
    }
</script>

<!--<div class="content_top">
    <div class="content_middle">
        <div class="container">
            <div class="content_middle_box">
                <div class="top_grid">
                    <div class="col-md-3 index-grids"  style="height: 340px;">
                        <div class="grid1">


                        </div>
                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div>
        </div>
    </div>
</div>-->
<main id="app">
    <section class="container">
        <div class="buy-sidebar" data-v-52f9827b="">
            <div class="poi-info" data-v-52f9827b="">
                <div class="poi-img" data-v-52f9827b="">
                    <img th:src="${hotel.getHotelPic()}" alt="" data-v-33200afa="" data-v-52f9827b="">
                </div>
                <h2 class="column-title" data-v-52f9827b="" th:text="${hotel.getHotelName()}" ></h2>
                <div class="poi-address" data-v-52f9827b="" th:text=" '城市: '+${hotel.getHotelLocation()}"></div>

            </div>
            <div class="room-info" data-v-52f9827b="">
            <div class="column-title" data-v-52f9827b="" th:text="${room.getCategory()} + '（一人一证）'"></div>
            <ul class="room-info-list" data-v-52f9827b="">
                <li data-v-52f9827b=""><em data-v-52f9827b="">上网</em><span data-v-52f9827b="">WiFi</span></li>
                <li data-v-52f9827b=""><em data-v-52f9827b="">卫浴</em><span data-v-52f9827b="">独立</span></li>
                <li data-v-52f9827b=""><em data-v-52f9827b="">窗户</em><span data-v-52f9827b="">有</span></li>
                <li data-v-52f9827b=""><em data-v-52f9827b="">可住</em><span data-v-52f9827b="">2人</span></li>
                <li data-v-52f9827b=""><em data-v-52f9827b="" >单价</em><span data-v-52f9827b="" id="price" th:text="${room.getPrice()}"></span></li>
                <!--<li data-v-52f9827b=""><em data-v-52f9827b="">面积</em><span data-v-52f9827b="">12㎡</span></li>-->
                <li data-v-52f9827b=""><em data-v-52f9827b="">楼层</em><span data-v-52f9827b="">1-2层</span></li>
                <li data-v-52f9827b=""><em data-v-52f9827b="">床型</em><span data-v-52f9827b="">大床1.5×2.0米1张</span></li>
                <li data-v-52f9827b=""><em data-v-52f9827b="">早餐</em><span data-v-52f9827b="">无早餐</span></li>
            </ul>
        </div>
            <div data-v-89bc8f9e="" data-v-52f9827b="" class="order-prcie-wrapper" >
         <div data-v-89bc8f9e="" class="column-title order-price-column">订单总额
         <div data-v-89bc8f9e="" class="order-amount-wrapper">

        <div data-v-89bc8f9e="" class="order-amount" id="">¥
            <fieldset form="ordersub"><em  name="em" id="em" data-v-89bc8f9e="">0</em></fieldset></div>
       <!-- <div data-v-566024fd="" data-v-89bc8f9e="" class="order-price-detail" style="display: none;">
            <div data-v-566024fd=""><span data-v-566024fd="" class="detail-title">房费/早餐</span></div>
            <div data-v-566024fd="">1晚</div>
            <ul data-v-566024fd="" class="price-list" style="width: 121px;">
             <li data-v-566024fd=""><div data-v-566024fd="" class="price-date">2019-06-27不含早</div>
                <div data-v-566024fd="" class="price-content"><span data-v-566024fd="" class="price">1 × ¥119</span></div>
             </li>
            </ul>
           </div>-->
         </div>
         </div>
                <div data-v-89bc8f9e="" class="order-amount-line"></div>
            </div>
        </div>
        <div class="buy-content" data-v-57724f92="" style="min-height: 631.333px;">
            <div class="column-module" data-v-57724f92="">
                <div class="column-title" data-v-57724f92="">预订信息</div>
                <!--style="display: none;" -->
                <div style="display: none;" name="roomId" class="column-title"  form="ordersub"  th:text="${room.getRoomId()}"  ></div>
                <ul class="column-list" data-v-57724f92="">
                    <li data-v-57724f92=""><em data-v-57724f92="">房型名称</em><span data-v-57724f92="" th:text="${room.getCategory()} + '（一人一证）'"></span></li>
                    <li data-v-57724f92=""><em data-v-57724f92="">入离日期</em>
                        <span class="check-in-out" data-v-57724f92="">
                        <input form="ordersub" id="checkin_time" name="checkin_time" type="date"   data-v-57724f92="" > </input>
                        <span class="connect-line" data-v-57724f92="">至</span>
                        <input form="ordersub" id="checkout_time" name="checkout_time" type="date" data-v-57724f92="" > </input>
                            <input type="hidden" name="roomId" form="ordersub"  th:value="${room.getRoomId()}"> </input>
                            <input type="hidden" name="pcnt" form="ordersub"  th:value="${room.getPcnt()}"> </input>
                            <input type="hidden" name="roomCategory" form="ordersub"  th:value="${room.getCategory()}"> </input>
                            <input type="hidden" name="userId" form="ordersub"  th:value="${session.user.userId}"> </input>
                            <input type="hidden" id="totalPrice" name="totalPrice" form="ordersub" value="1" > </input>

              <!--  <input type="hidden" form="ordersub" th:text="${session.user.getId()}"></input>-->
                            总 共<span id="diffdays" class="check-num" data-v-57724f92="">0 </span>天
                        </span>
                        <script> $('#checkout_time').change(
                            function() {
                                var firstDate = new Date($('#checkin_time').val());
                                var secondDate = new Date($('#checkout_time').val());
                                var diff = Math.abs(firstDate.getTime() - secondDate.getTime())
                                var result = parseInt(diff/(1000 * 60 * 60 * 24));
                                $('#diffdays').text( result )})</script>
                    </li>
                    <li data-v-57724f92=""><em data-v-57724f92="">房间数量</em><span data-v-57724f92="">
                    <select form="ordersub" name="amount" id="select" class="buy-room" data-v-57724f92="" >
                        <option data-v-57724f92="" value="0">0</option>
                        <option data-v-57724f92="" value="1">1</option>
                        <option data-v-57724f92="" value="2">2</option>
                        <option data-v-57724f92="" value="3">3</option>
                    </select>
                      <!--  parseInt($('#select').val())* parseInt($('#price').val())
                        $('#select').val() * $('#price').val()-->
                        <script> $('#select').change(
                            function() {
                                var amount=parseInt($('#select').val());
                                var price=[[${room.getPrice()}]]
                                var days=parseInt($('#diffdays').text());
                                $('#em').text( price*amount*days);
                                var psel = document.getElementById("totalPrice");
                                //alert("获取到的value：" + psel.value+" ,"+$("#totalPrice").val()); //获取
                                psel.value = price*amount*days; //设置
                                //alert("设置后的value：" + psel.value); //设置后的
                            });
                        </script>
                    </span>
                    </li>
                </ul>
                <div class="column-module" data-v-57724f92="">
                    <form data-v-57724f92=""><div class="column-title" data-v-57724f92="">入住信息</div><ul class="column-list" data-v-57724f92=""><li data-v-57724f92=""><em data-v-57724f92="">入住人<!----></em><span data-v-57724f92=""><input type="text" placeholder="请填写入住人姓名" data-v-57724f92=""></span></li><li data-v-57724f92=""><em  data-v-57724f92="">联系手机</em><span data-v-57724f92=""><input form="ordersub" type="text"  name="phone" placeholder="用于接收通知短信" value="" data-v-57724f92=""></span></li><li data-v-57724f92=""><em data-v-57724f92="">预计到店</em><span data-v-57724f92=""><select class="buy-arrive" data-v-57724f92=""><option value="0" data-v-57724f92="">
                                21:00（不影响酒店留房）</option><option data-v-57724f92="" value="1">
                                22:00（不影响酒店留房）</option><option data-v-57724f92="" value="2">
                                23:00（不影响酒店留房）</option><option data-v-57724f92="" value="3">
                                次日00:00（不影响酒店留房）</option><option data-v-57724f92="" value="4">
                                次日01:00（不影响酒店留房）</option><option data-v-57724f92="" value="5">
                                次日02:00（不影响酒店留房）</option><option data-v-57724f92="" value="6">
                                次日03:00（不影响酒店留房）</option><option data-v-57724f92="" value="7">
                                次日04:00（不影响酒店留房）</option><option data-v-57724f92="" value="8">
                                次日05:00（不影响酒店留房）</option><option data-v-57724f92="" value="9">
                                次日06:00（不影响酒店留房）</option>
        </select>
        </span>
        </li>
        </ul>
        </form>
        </div><div class="column-module" data-v-57724f92=""><div class="column-title" data-v-57724f92="">取消规则
            </div>
                <div class="column-tips" data-v-57724f92="">根据酒店政策，入住前一天上午可免费取消，若已过最晚可取消时间，如未入住，酒店将扣除全部房费。预订成功后15分钟内可免费取消，无需商家同意即可马上退款至您的原支付账户（限入住日24点前），极速退款权益不受酒店取消政策限制。
                </div></div><div data-v-2772060c="" data-v-57724f92="">


                <button  form="ordersub" type="submit" class="submit-btn" data-v-2772060c="">提交订单</button>
            <form id="ordersub" action="/order/submmit" method="post" data-v-66834ad4="" data-v-2772060c=""></form>

        </div>
        </div>
       </form>
        </div>
     </section>
</main>

        <div class="footer">
            <div class="container"></div>
            <div class="footer_top">
                <h3>&nbsp;</h3>
                <h3>四川大学酒店订购系统</h3>
                <h3>Team 22</h3>
            </div>
        </div>
</body>
</html>